<template>
	<view class="addAddress">
		<view class="tabs">
			<view class="send">
				<view class="title" v-for="item in title" :key="item" :class="{active:currentId==item._id}"
					@tap="switchTitle(item._id)">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="container" v-if="customerAddress.length>0">
			<!-- 用户地址 -->
			<view class="address" v-for="item in customerAddress" :key="item.id">
				<view class="user_info">
					<view class="left" @tap="setDefault(item)">
						<text>{{item.customName}}</text>
						<text>{{item.telephone}}</text>
						<!-- 设置默认 -->
						<button type="default" v-if="item.isdefault==1">默认</button>
					</view>
					<view class="right">
						<view style="color: #007AFF;" @tap="delAddress(item)">删除</view>
						<navigator :url="'../updataAddress/updataAddress?id='+item.id">
							<image src="../../static/images/zjc/A-16/icon_updata_address@2x.png" class="updata_icon">
							</image>
						</navigator>
					</view>
				</view>
				<view class="user_address">
					<text>{{item.address}}</text>
					<text>{{item.remark}}</text>
				</view>
			</view>
		</view>
		<view class="container" v-if="customerAddress.length==0">
			<text class="msg">你还未添加任何收货地址</text>
		</view>
		<view class="foot">
			<button type="default" @tap="setIsAdd">+添加收货地址</button>
		</view>
		<view class="add" v-if="isAdd">
			<view class="item">
				<text @tap="setIsAdd" class="close">关闭</text>
			</view>
			<view class="item">
				<text>收货人:</text>
				<input type="text" value="" v-model="userAddress.customName" />
			</view>
			<view class="item">
				<text>
					联系电话:
				</text><input type="text" value="" v-model="userAddress.telephone" />
			</view>
			<view class="item">
				<text>
					收货地址(省市区):
				</text>
				<input type="text" value="" v-model="userAddress.address" @tap="showLocation" />
				<view class="location" v-if="isShowLocation">
					<view class="location_box">
						<view class="item">
							<view class="name" @tap="showProvince()">
								{{userArea[0]}}
							</view>
							<scroll-view scroll-y="true" class="location_list" v-if="isShowProvince">
								<view v-for="(item,index) in provinceData" :key="item.pid"
									@tap="showProvince(item,index)">{{item.pname}}</view>
							</scroll-view>
						</view>
						<view class="item">
							<view class="name" @tap="showCity()">
								{{userArea[1]}}
							</view>
							<scroll-view scroll-y="true" class="location_list" v-if="isShowcity">
								<view v-for="(item,index) in cityData" :key="item.cid" @tap="showCity(item,index)">
									{{item.cname}}
								</view>
							</scroll-view>
						</view>
						<view class="item">
							<view class="name" @tap="showZone()">
								{{userArea[2]}}
							</view>
							<scroll-view scroll-y="true" class="location_list" v-if="isShowZone">
								<view v-for="(item,index) in zoneData" :key="item.zid" @tap="showZone(item,index)">
									{{item.zname}}
								</view>
							</scroll-view>
						</view>
					</view>
					<button type="default" @tap="showLocation" class="confirm_btn">确认</button>
				</view>
			</view>
			<view class="item">
				<text>详细地址(备注):</text>
				<input type="text" value="" v-model="userAddress.remark" />
			</view>
			<view class="item">
				<button type="default" @tap="saveAddress">保存</button>
			</view>
		</view>
		<!-- 遮罩层 -->
		<view class="shadow" v-if="isAdd" @tap="setIsAdd">
		</view>
	</view>
</template>
<script>
	import {
		createNamespacedHelpers
	} from "vuex";
	let {
		mapActions,
		mapState,
		mapMutations
	} = createNamespacedHelpers("users");
	export default {
		data() {
			return {
				provinceID: "110000",
				isShowProvince: false,
				isShowcity: false,
				isShowZone: false,
				isAdd: false, //点击添加地址
				isShowLocation: false, //显示省市区三级联动
				title: [{
					_id: 1,
					name: "配送到店"
				}, {
					_id: 2,
					name: "配送到家"
				}],
				currentId: 1,
				//用户添加的地址信息
				userAddress: {
					customName: "",
					telephone: "",
					remark: "",
					address: ""
				},
				//地区默认值
				userArea: ["四川省", "成都市", "锦江区"],
				provinceData: [], //省份数据
				cityData: [],
				zoneData: []
			}
		},
		async onLoad() {
			const province = await this.myGetAllProvince(); //获取省份数据
			this.mylookAddress(); //获取用户所有收货地址
			this.provinceData = province.data; //初始化省份
			this.userAddress.address = this.userArea.join(""); //初始地址
		},
		methods: {
			...mapActions(["myGetAllProvince", "myGetAllCityByPid", "myGetAllZoneByCid", "mylookAddress", "myAddAddress",
				"mySetDefaultAddress", "delUserAddress"
			]),
			//控制头部切换
			switchTitle(id) {
				this.currentId = id;
			},
			//设置默认地址
			async setDefault(item) {
				const res = await this.mySetDefaultAddress(item.id);
				if (res.result) {
					uni.showModal({
						title: "提示",
						content: "已将该地址设置为默认地址",
						showCancel: false
					});
					this.mylookAddress();
				}
			},
			//关闭或显示选择地区弹出框
			setIsAdd() {
				this.isAdd = !this.isAdd;
			},
			//是否显示省份滚动条
			async showProvince(item, index) {
				this.isShowProvince = !this.isShowProvince;
				// 修改省份
				if (item) {
					this.$set(this.userArea, 0, item.pname);
					//获取对应的市
					const res = await this.myGetAllCityByPid(item.pid);
					this.cityData = res.data;
					this.$set(this.userArea, 1, this.cityData[0].cname);
					this.$set(this.userArea, 2, "");
				};
			},
			async showCity(item, index) {
				this.isShowcity = !this.isShowcity;
				//修改市
				if (item) {
					this.$set(this.userArea, 1, item.cname);
					//获取对应的地区
					const res = await this.myGetAllZoneByCid((item.cid));
					this.zoneData = res.data;
					this.$set(this.userArea, 2, this.zoneData[0].zname);
				};
			},
			//显示地区数据
			showZone(item, index) {
				this.isShowZone = !this.isShowZone;
				// console.log(this.isShowZone)
				if (item) {
					this.$set(this.userArea, 2, item.zname);
				}
			},
			showLocation() {
				this.isShowLocation = !this.isShowLocation;
				this.userAddress.address = this.userArea.reduce((data, e) => {
					return data + e;
				}, "");
			},
			//添加用户地址
			async saveAddress() {
				const res = await this.myAddAddress(this.userAddress); //保存收货地址
				if (res.result) {
					uni.showModal({
						title: "提示",
						content: "添加地址成功",
						showCancel: false
					});
					this.mylookAddress();
					this.isAdd = !this.isAdd;
					this.userAddress = {
						customName: "",
						telephone: "",
						remark: "",
						address: ""
					}
				}
			},
			// 删除用户收货地址
			async delAddress(item) {
				const res = await this.delUserAddress(item.id);
				if (res.result) {
					uni.showModal({
						title: "提示",
						content: "删除地址成功",
						showCancel: false
					});
					this.mylookAddress();
				} else {
					uni.showModal({
						title: "提示",
						content: "删除地址失败",
						showCancel: false
					});
				}
			}
		},
		computed: {
			...mapState(["customerAddress"]), //用户所有收货地址
		}
	}
</script>

<style>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #f5f5f5;
	}

	.addAddress .tabs {
		margin-bottom: 16rpx;
		margin-top: 18rpx;
	}

	.tabs .send {
		display: flex;
		width: 304rpx;
		margin: 0 auto;
		border-radius: 8rpx 0rpx 0rpx 8rpx;
	}


	.tabs .send .title {
		width: 152rpx;
		line-height: 60rpx;
		text-align: center;
		background-color: #ffffff;
	}

	.tabs .send .active {
		color: #ffffff;
		background-color: #ee1515;
	}


	.container .address,
	.default {
		width: 690rpx;
		margin: 0 auto;
		margin-bottom: 48rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 35rpx 40rpx 30rpx 40rpx;
	}

	.container .msg {
		font-size: 36rpx;
		color: #c1c1c1;
		text-align: center;
	}

	.user_info {
		display: flex;
		justify-content: space-between;
	}

	.user_info .left {
		display: flex;
	}

	.user_info .left button {
		width: 64rpx;
		height: 30rpx;
		background-color: #ee1515;
		border-radius: 16rpx;
		font-size: 18rpx;
		line-height: 26rpx;
		color: #ffffff;
		text-align: center;
		margin-left: 14rpx;
		margin-top: 5rpx;
	}

	.user_info .right {
		display: flex;
	}

	.user_info .updata_icon {
		width: 40rpx;
		height: 40rpx;
		margin-left: 20rpx;
	}

	.user_info navigator {
		width: 50rpx;
	}

	.address .user_address {
		font-size: 24rpx;
		line-height: 34rpx;
		color: #757575;
	}

	.foot button {
		width: 438rpx;
		height: 64rpx;
		border-radius: 8rpx;
		border: solid 2rpx #ee1515;
		line-height: 64rpx;
		color: #ef3434;
		position: fixed;
		bottom: 30rpx;
		left: 78rpx;
		right: 78rpx;
	}

	.add {
		width: 700rpx;
		border: 1rpx solid #007AFF;
		background-color: #ffffff;
		position: absolute;
		bottom: 150rpx;
		left: 25rpx;
		right: 25rpx;
		box-sizing: border-box;
		padding: 0 20rpx;
		border-radius: 24rpx;
		z-index: 2;
	}

	.add .item {
		margin: 20rpx 0;
		display: flex;
	}

	.add .item input {
		background-color: #f5f5f5;
		border: 1rpx solid #c1c1c1;
		width: 70%;
		height: 55rpx;
		border-radius: 15rpx;
		padding-left: 10rpx;
	}

	.add .item text {
		width: 30%;
		line-height: 50rpx;
	}

	.add .item button {
		width: 240rpx;
		height: 55rpx;
		border-radius: 30rpx;
		background-color: #F16C6C;
		color: #ffffff;
		line-height: 60rpx;
	}

	.add .item .close {
		font-weight: bold;
	}

	.shadow {
		width: 100vw;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		background-color: rgba(0, 0, 0, .5);
	}

	.location {
		width: 650rpx;
		height: 600rpx;
		position: absolute;
		bottom: 200rpx;
		left: auto;
		z-index: 3;
		border: 2rpx solid #007AFF;
		background-color: #f5f5f5;
	}

	.location .location_list {
		width: 200rpx;
		height: 400rpx;
		border: 1rpx solid #c1c1c1;
	}

	.location .location_box {
		display: flex;
		justify-content: space-around;
		margin-bottom: 20rpx;
	}

	.location .location_box .item {
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		text-align: center;
	}

	.location .location_box .item .name {
		padding: 5rpx 5rpx;
		/* width: 150rpx; */
		height: 50rpx;
		text-align: center;
	}

	.location .location_list view {
		padding: 5rpx 5rpx;
	}

	.location .confirm_btn {
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		bottom: 50rpx;
	}
</style>
